<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 300px;
        height: 300px;
        /* outline: 1px solid red; */
        box-sizing: border-box;
        margin: 10px;
        background-color: rgb(253, 250, 250);
      }
      .image {
        width: 300px;
      }
      .price {
        display: flex;
        justify-content: space-between;
      }
      .text {
        text-align: center;
      }
      .maxbox {
        width: 650px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      .color{
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>查找相似产品：{{name}}</h2>
      <div class="maxbox">
        <my-cpn
          v-for="item in list"
          :key="item.id"
          :src="item.img"
          :name="item.text"
          :price="item.price"
          @getname="changeName"
        ></my-cpn>
      </div>
    </div>
    <script src="../vue.js"></script>
    <template id="myCpn">
      <div>
        <div class="box">
          <img class="image" :src="src" alt="" />
          <div>
            <h4 class="text">{{name}}</h4>
            <p class="price"><span class="color">¥{{price}}</span> <button @click="find(name)">找相似</button></p>
          </div>
        </div>
      </div>
    </template>
    <script>
      //组件
      Vue.component("my-cpn", {
        template: "#myCpn",
        data() {
          return {};
        },
        props: ["src", "name", "price"],
        methods:{
          find(name){
            this.$emit('getname',name)
          }
        }
      });
      //实例
      let app = new Vue({
        el: "#app",
        data() {
          return {
            name: "",
            list: [
              {
                id: 1,
                img: "https://img0.baidu.com/it/u=512340543,3139277133&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281",
                text: "小米11，小身材大味道,hhhhhhh小米撒谎多久啊圣诞节啊",
                price: 5999,
              },
              {
                id: 2,
                img: "https://img0.baidu.com/it/u=3798217922,3880088897&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
                text: "小米12，开启全新new时代，给你无限可能，小米12proMax",
                price: 3399,
              },
              {
                id: 3,
                img: "https://img1.baidu.com/it/u=722430420,1974228945&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
                text: "无限风光，你值得拥有 eeeeeeee沙地和嗖地哦我去的武",
                price: 5599,
              },
              {
                id: 4,
                img: "https://img1.baidu.com/it/u=902830885,4052311299&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
                text: "小米12 redmi 超乎你的想象",
                price: 6676,
              },
              {
                id: 5,
                img: "https://img1.baidu.com/it/u=4049022245,514596079&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
                text: "呵呵呵呵呵呵呵呵呵",
                price: 23333,
              },
              {
                id: 6,
                img: "https://img0.baidu.com/it/u=3217543765,3223180824&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=750",
                text: "哈哈哈哈哈哈哈哈哈哈哈哈哈",
                price: 2376,
              },
            ],
          };
        },
        methods:{
          changeName(val){
            this.name=val
          }
        }
      });
    </script>
  </body>
</html>
